<template>
  <div class="">
    <Header>
      <span slot="middle">热门歌手</span>
    </Header>

    <!-- 展示列表 -->
    <div class="singer">
      <div v-for="item in artists" :key="item.id"  @click="goplayer(item.id)">
        <img :src="item.picUrl" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/NavBar.vue";
import { getsinger } from "../../api/music";
export default {
  data() {
    return {
      artists: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取歌手分类
    async getplayers(num) {
      const result = await getsinger(num);
      console.log(result);
      this.artists = result.artists;
    },
    //跳转歌手详情页
     goplayer(id) {
      this.$router.push(`/playmusicer/${id}`)
    },
  },
  created() {
    this.getplayers(60);
  },
  mounted() {},
  components: {
    Header,
  },
};
</script>
<style scoped>
.singer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.singer p {
  text-align: center;
  width: 100px;
  font-size: 12px;
  -webkit-line-clamp: 1; /* 显示多少行 */
  display: -webkit-box; /* 配合上面使用 伸缩盒 */
  -webkit-box-orient: vertical; /* 检测排列方式 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出文本省略号 */
}
.singer img {
  display: block;
  width: 100px;
  height: 100%;
  box-shadow: 0px 0px 2px;
  border-radius: 5px;
}
</style>